<template>
  <b-container>
    <b-row class="my-4">
      <b-col class="animated bounceInLeft">
        <h2>{{ topicTitle }}</h2>
      </b-col>
      <b-button pill variant="danger" style="margin-right: 10px" v-if="canDel(comments[0].user.id)&&(!isShowReply)"
                @click="delTopic(comments[0].topicId)" class="animated fadeInUp">删除
      </b-button>
      <b-button pill variant="success" @click="reply" v-if="!isShowReply" class="animated fadeInUp">回 复</b-button>
      <div v-if="isShowReply">
        <b-button pill variant="danger" style="margin-right: 10px" @click="cancelReply" class="animated fadeInUp">取 消
        </b-button>
        <b-button pill variant="primary" @click="sendReplyMd" class="animated fadeInUp">发 送</b-button>
      </div>
    </b-row>
    <b-row class="my-3 align-content-center" v-if="isShowReply">
      <b-col>
        <mavon-editor v-model="replyMd" class="animated fadeIn"></mavon-editor>
      </b-col>
    </b-row>
    <b-row class="my-3 animated bounceInUp" v-for="(comment,index) in comments" :key="index">
      <b-card no-body
              class="overflow-hidden"
              border-variant="primary"
      >
        <b-row no-gutters>
          <b-col md="2">
            <b-card-img
                :src="comment.user.avatar"
                class="rounded-0"

            />
          </b-col>
          <b-col style="border-left: solid gray 1px">
            <b-card-header header-bg-variant="transparent">
              <b>
                <b-link @click="goHome(comment.user.id)">{{ comment.user.username }}</b-link>
              </b>
              <span style="float: right">
                <b><b-link class="iconfont icon-dianzan"
                           @click="thumbs(comment,'like')"/></b>
                {{ comment.likeCount }}
                <b-link class="iconfont icon-cai"
                        style="margin-left: 10px;color: red"
                        @click="thumbs(comment,'dislike')"/>
                {{ comment.dislikeCount }}
                <b><b-link class="iconfont icon-pinglun" style="margin-left: 10px;color: gray"/></b>
              </span>
            </b-card-header>
            <b-card-body>
              <!--              <b-card-text class="markdown-body">-->
              <!--&lt;!&ndash;                {{comment.content}}&ndash;&gt;-->
              <!--                -->
              <!--              </b-card-text>-->
              <mavon-editor
                  :editable=false
                  :value="comment.content"
                  :subfield=false
                  default-open="preview"
                  :toolbars-flag=false
                  :box-shadow=false
                  style="min-height: 100px;background-color:#FFFFFF;border: transparent;z-index: 0"
              ></mavon-editor>
            </b-card-body>
          </b-col>
        </b-row>
        <b-card-footer footer-bg-variant="transparent">
          {{ comment.createAt }}
          <a style="float: right">{{ index+1 }}楼</a>
          <b-link style="float: right;margin-right: 10px"
                  v-if="canDel(comment.user.id)"
                  @click="delComment(comment.id)">删除
          </b-link>

        </b-card-footer>
      </b-card>
    </b-row>
  </b-container>
</template>

<script>
import axios from "axios";

export default {
  name: "Comments",
  data() {
    return {
      page: 1,
      limit: 100,
      isShowReply: false,
      topicId: this.$route.query.topicId,
      topicTitle: this.$route.query.title,
      replyMd: "",
      comments: []
    }
  },
  methods: {
    thumbs(comment, thumbAction) {
      axios({
        method: "get",
        url: "/dev_api/comments/" + comment.id + "/" + thumbAction,
        headers: {
          "Authorization": this.$store.state.token
        }
      })
          .then(response => {
            console.log("thumbs response:", response.data)
            comment.likeCount = response.data.data.likeCount
            comment.dislikeCount = response.data.data.dislikeCount
          })
          .catch(error => {
            alert(error)
          })
    },
    goHome(uid) {
      console.log("被查看用户的id：", uid)
      this.$router.push({name: "home", query: {uid: uid}})
    },
    delComment(id) {
      axios.delete("/dev_api/comments/" + id, {
        headers: {
          "Authorization": this.$store.state.token
        }
      })
          .then(response => {
            console.log("删除comment回复response:", response.data)
            location.reload()
            this.$bvToast.toast("成功删除", {
              title: "消息",
              variant: "success",
              autoHideDelay: 1000,
              solid: true
            });
          })
    },
    delTopic(topicId) {
      axios.delete("/dev_api/topics/" + topicId, {
        headers: {
          "Authorization": this.$store.state.token
        }
      }).then(response => {
        console.log("删除topic回复response:", response.data)
        this.$router.go(-1)
        alert("成功删除")
      })
    },
    canDel(id) {
      console.log("对象id：", id, ";用户id：", this.$store.state.uid)
      return id == this.$store.state.uid
    },
    reply() {
      this.isShowReply = true
    },
    cancelReply() {
      this.isShowReply = false
    },
    sendReplyMd() {
      console.log("token:", this.$store.state.token)
      axios({
        method: "post",
        url: "/dev_api/topics/" + this.topicId,
        data: {content: this.replyMd},
        headers: {
          "Authorization": this.$store.state.token
        }
      })
          .then(response => {
            if (response.data.code === 200) {
              console.log("回复topic的response:", response.data)
              this.$bvToast.toast("发送成功", {
                title: "消息",
                variant: "success",
                autoHideDelay: 1000,
                solid: true
              });
              location.reload();
            } else {
              this.$bvToast.toast("发送失败", {
                title: "消息",
                variant: "danger",
                autoHideDelay: 1000,
                solid: true
              });
            }

          })
          .catch(error => {
            console.log(error)
            // alert(error)
            location.reload()
          })
    }
  },
  created() {
    console.log(this.topicId)
    axios
        .get("/dev_api/comments", {
          params: {topicId: this.topicId, page: this.page, limit: this.limit}
        })
        .then(response => {
          if (response.data.code === 200) {
            this.comments = response.data.data
            console.log("显示楼层response:", this.comments)
          } else {
            alert("请求失败")
          }
        }).catch(error => {
      console.log(error)
    })
  }
}
</script>

<style scoped>

</style>